header {
	.b-line;
	width: 100%;
	background: @headerBg;
	.toolbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		transform: translateZ(0);
		width: 100%;
		padding: 6px;
		min-height: 44px;
		.button {
			.flex-wrap-center;
			max-height: 32px;
		}
	}

	.header-title {
		flex: 1;
		order: 4;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		line-height: 44px;
		padding: 0 80px;
		text-align: center;
		font-size: @l1;
		font-weight: 400;
		transform: translateZ(0);
		color: @titleColor;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.bar-button {
		.flex-wrap-center;
		.box-round;
		overflow: hidden;
		position: relative;
		z-index: 1;
		min-width: 36px;
		height: 32px;
		line-height: 32px;
		font-size: @l3;
		border: none;
		box-shadow: none;
		background: none;
		color: @headerBtnColor;
		// dwz-icon 图标
		i {
			font-size: 24px;
		}
	}

	&.is-float {
		.no-line;
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		z-index: 10;
	}
	&.is-light,
	&.is-semi,
	&.is-dark {
		.no-line;
		.header-title {
			color: @lightTxtColor;
		}
		.bar-button,
		.button.is-text {
			color: @headerLightBtnColor;
		}
	}
	&.is-semi {
		background: @headerSemiBg;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 10;
	}
	&.is-dark {
		background: @headerDarkBg;
	}

	// 右对齐
	&.is-right {
		.toolbar {
			justify-content: flex-end;
		}
		&.is-float {
			left: auto;
			right: 0;
		}
	}
}
